<script lang="ts">
import { defineComponent, reactive, ref } from 'vue';
import {
  Form,
  FormItem,
  Input,
  Button,
  Textarea,
  Select,
} from 'ant-design-vue';
import type { SelectProps } from 'ant-design-vue';
import { useRouter } from 'vue-router';
import { useHomeStore } from '@/store';
import type { ContactInfo } from '@/types';

const home = useHomeStore();

interface FormState {
  nickname: string;
  area: string;
  company: string;
  job: string;
  email: string;
  phone: string;
  interestedPro: undefined;
}
export default defineComponent({
  components: {
    AForm: Form,
    AFormItem: FormItem,
    AButton: Button,
    AInput: Input,
    ATextarea: Textarea,
    ASelect: Select,
  },
  setup() {
    const router = useRouter();
    const formRef = ref();
    const formState = reactive<FormState>({
      nickname: '',
      area: '',
      company: '',
      job: '',
      email: '',
      phone: '',
      interestedPro: undefined,
    });
    const productOptions = ref<SelectProps['options']>([
      {
        value: '国际云专线',
        label: '国际云专线',
      },
      {
        value: '金融低延时',
        label: '金融低延时',
      },
      {
        value: '国际本地DIA&IPLC',
        label: '国际本地DIA&IPLC',
      },
      {
        value: '带宽&传输',
        label: '带宽&传输',
      },
      {
        value: 'IDC',
        label: 'IDC',
      },
      {
        value: 'SDWAN',
        label: 'SDWAN',
      },
    ]);
    const leaveMsg = ref<string>('');

    const submitForm = () => {
      formRef.value
        .validateFields()
        .then((res: FormState) => {
          const data: ContactInfo = { ...res, ['leaveMsg']: leaveMsg.value };
          home.createContactInfo(data);
          router.push('/thanks');
        })
        .catch((err: any) => {
          console.log('err', err);
        });
    };

    return {
      formRef,
      formState,
      productOptions,
      submitForm,
      leaveMsg,
    };
  },
});
</script>

<template>
  <div id="home-concat">
    <div class="container">
      <div class="content">
        <div class="left">
          <div class="topTitle">
            <div class="title">
              <span class="our">与我们</span>
              <span class="concat">联系</span>
            </div>
            <div class="comment">专家团队为您解答，让连接简单</div>
          </div>
          <div class="address">
            <span class="title">通讯地址：</span>
            <p>地址：香港湾仔轩尼诗道253-261号依时商务中心</p>
          </div>
        </div>
        <div class="right">
          <a-form
            ref="formRef"
            :model="formState"
            name="basic"
            autocomplete="off"
            :hideRequiredMark="true"
          >
            <a-form-item
              name="nickname"
              :rules="[{ required: true, message: '请输入您的昵称!' }]"
            >
              <a-input
                v-model:value="formState.nickname"
                :bordered="false"
                placeholder="昵称*"
              />
            </a-form-item>
            <a-form-item
              name="area"
              :rules="[{ required: true, message: '请输入您所在的地区!' }]"
            >
              <a-input
                v-model:value="formState.area"
                :bordered="false"
                placeholder="地区*"
              />
            </a-form-item>
            <a-form-item
              name="company"
              :rules="[{ required: true, message: '请输入公司名称!' }]"
            >
              <a-input
                v-model:value="formState.company"
                :bordered="false"
                placeholder="公司*"
              />
            </a-form-item>
            <a-form-item
              name="job"
              :rules="[{ required: true, message: '请输入您的职务!' }]"
            >
              <a-input
                v-model:value="formState.job"
                :bordered="false"
                placeholder="职务*"
              />
            </a-form-item>
            <a-form-item
              name="email"
              :rules="[
                { required: true, message: '请输入邮箱地址!', trigger: 'blur' },
                {
                  pattern: /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/,
                  message: '请输入有效的邮箱地址!',
                  trigger: 'blur',
                },
                {
                  min: 2,
                  max: 32,
                  message: '邮箱地址长度需在2至32个字符之间!',
                  trigger: 'blur',
                },
              ]"
            >
              <a-input
                v-model:value="formState.email"
                :bordered="false"
                placeholder="邮箱*"
              />
            </a-form-item>
            <a-form-item
              name="phone"
              :rules="[
                { required: true, message: '请输入电话号码!', trigger: 'blur' },
                {
                  pattern: /^\+[1-9]?[0-9]{7,14}$/,
                  message: '请输入有效的电话号码!',
                  trigger: 'blur',
                },
              ]"
            >
              <a-input
                v-model:value="formState.phone"
                :bordered="false"
                placeholder="电话(例如:+8613555556666)"
              />
            </a-form-item>
            <a-form-item name="interestedPro">
              <a-select
                ref="select"
                placeholder="感兴趣的产品"
                style="width: 100%"
                v-model:value="formState.interestedPro"
                :bordered="false"
                :options="productOptions"
              >
              </a-select>
            </a-form-item>
          </a-form>
          <a-textarea
            v-model:value="leaveMsg"
            :autosize="{ minRows: 4, maxRows: 6 }"
            placeholder="留言"
            style="color: #484848"
          />
          <a-button type="primary" @click="submitForm">提交信息</a-button>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
#home-concat {
  margin-top: 70px;
  padding-top: 105px;
  width: 100%;
  height: 840px;
  background-image: url('@/assets/images/home/banner/contact_us.png'),
    url('@/assets/images/home/banner/ending_background.png'),
    url('@/assets/images/home/banner/ending_background.png');
  background-size: cover;
  background-repeat: no-repeat;
  .content {
    padding: 0 100px;
    display: flex;
    justify-content: space-between;

    .left {
      margin-top: 46px;
      height: 518px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .topTitle {
        .title {
          font-family: 'SourceHanSansCN-Heavy';
          font-size: 56px;
          margin-bottom: 26px;
          .our {
            color: #fefefe;
          }
          .concat {
            font-weight: 700;
            /* 定义渐变色背景 */
            background: linear-gradient(to right, #21c4f2, #8ffd9f);
            /* 设置背景剪切区域为文本 */
            -webkit-background-clip: text;
            /* 设置文本填充颜色为透明，只显示渐变色背景 */
            -webkit-text-fill-color: transparent;
          }
        }
        .comment {
          font-family: 'SourceHanSansCN-Regular';
          font-size: 36px;
          color: #fefefe;
        }
      }

      .address {
        .title {
          font-family: 'SourceHanSansCN-Bold';
          font-size: 28px;
          color: #fefefe;
        }
        p {
          margin-top: 23px;
          font-family: 'SourceHanSansCN-Light';
          font-size: 20px;
          color: #fefefe;
        }
      }
    }

    .right {
      margin-top: 46px;
      width: 378px;
      .ant-btn {
        margin-top: 30px;
        width: 173px;
        height: 40px;
        background: linear-gradient(to right, #0fb4f2, #3ef1c7);
        border-radius: 20px;
        border: none;
        font-size: 16px;
      }
    }
  }
}

.ant-input {
  color: #fbfcfd;
  font-size: 16px;
}
/* 修改placeholder的颜色和字体大小 */
.ant-form {
  .ant-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
    font-size: 16px;
  }
}

:deep(.ant-form-item) {
  border-bottom: 1px solid #fff;
}

:deep(.ant-select) {
  span {
    font-size: 16px;
  }
}

:deep(.ant-select-selection-placeholder) {
  color: rgba(255, 255, 255, 0.6);
  font-size: 16px;
}
:deep(.ant-select-selection-item) {
  color: #fbfcfd;
}

:deep(.ant-select-arrow) {
  color: #fbfcfd;
}

// xl(1200px)至xxl(1600px)
@media screen and (min-width: 1201px) and (max-width: 1600px) {
  #home-concat {
    .container {
      width: 85%;
      .content {
        padding: 0 50px;
      }
    }
  }
}
// lg(992px)至xl(1200px)
@media screen and (min-width: 993px) and (max-width: 1200px) {
  #home-concat {
    .container {
      width: 95%;
      .content {
        padding: 0 20px;
      }
    }
  }
}
// md(768px)至lg(992px)
@media screen and (min-width: 769px) and (max-width: 992px) {
  #home-concat {
    .container {
      width: 100%;
      .content {
        padding: 0 10px;
      }
    }
  }
}
// sm(576px)至md(768px)
@media screen and (min-width: 577px) and (max-width: 768px) {
  #home-concat {
    .container {
      width: 100%;
      .content {
        padding: 0 10px;

        .left {
          .topTitle {
            .title {
              font-size: 36px;
            }
            .comment {
              font-size: 22px;
            }
          }

          .address {
            .title {
              font-size: 24px;
            }
            p {
              font-size: 18px;
            }
          }
        }
        .right {
          width: 378px;
        }
      }
    }
  }
}
// 少于xs(576px) ---- 同上
@media screen and (max-width: 576px) {
  #home-concat {
    padding-top: 20px;
    .container {
      width: 100%;
      .content {
        padding: 0 10px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .left {
          height: 100px;
          .topTitle {
            text-align: center;
            .title {
              font-size: 36px;
            }
            .comment {
              font-size: 22px;
            }
          }

          .address {
            display: none;
          }
        }
        .right {
          width: 378px;
        }
      }
    }
  }
}
</style>
